<template>
  <div :id="id" :style="{ width: width, height: height }">
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {
    width: {
      type: String,
      default: '5.5375rem'
    },
    option: {
      type: Object,
      default: null
    },
    height: {
      type: String,
      default: '4.375rem'
    },
    id: {
      type: String,
      required: true
    }
  },
  //   data() {
  //     return {
  //       myChart: null,
  //       resizeTimer: null
  //     };
  //   },
  //   created() {
  //     this.$nextTick(() => {
  //       this.myChart = echarts.init(document.getElementById(this.id))
  //       this.myChart.setOption(this.option)
  //       // console.log(this.myChart);
  //     });
  //   },
  //   mounted() {
  //     this.myChart = echarts.init(document.getElementById(this.id))
  //     this.myChart.setOption(this.option)
  //     window.addEventListener('resize', this.handleResize);
  //   },
  //   destroyed() {
  //       this.myChart = echarts.init(document.getElementById(this.id));
  //   // 在组件销毁时，检查并销毁 ECharts 实例
  //   if (this.myChart) {
  //     this.myChart.dispose();
  //   }
  //   window.removeEventListener('resize', this.handleResize);
  // },
  // // beforeDestroy() {
  // //   this.myChart = echarts.init(document.getElementById(this.id));
  // //   if (this.myChart && !this.myChart.isDisposed()) {
  // //     window.removeEventListener('resize', this.handleResize);
  // //     this.myChart.dispose();
  // //   }
 
  // // },
  //   methods: {
  //     handleResize() {
  //     if (this.resizeTimer) {
  //       clearTimeout(this.resizeTimer);
  //     } else {
  //       this.resizeTimer = setTimeout(() => {
  //         this.myChart.resize();
  //         this.resizeTimer = null; // 重置为 null
  //       }, 500);
  //     }
  //   }
  //   },



  data() {
    return {
      myChart: null,
      // resizeTimer: null,
    };
  },
  created() {
    this.$nextTick(() => {
      this.initChart();
    });
    // console.log(1);
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
    // console.log(2);
  },
  // destroyed() {
  //   // 在组件销毁时，检查并销毁 ECharts 实例
  //   if (this.myChart) {
  //     this.myChart.dispose();
  //   }
  //   window.removeEventListener('resize', this.handleResize);
  // },
  beforeDestroy() {
    this.myChart = echarts.init(document.getElementById(this.id));
    if (this.myChart && !this.myChart.isDisposed()) {
      this.myChart.dispose();
    }
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    initChart() {
      // 检查是否已经存在实例，存在则销毁
      // this.myChart = echarts.init(document.getElementById(this.id));
      if (this.myChart) {
        this.myChart.dispose();
      }
      // 创建新的 ECharts 实例
      this.myChart = echarts.init(document.getElementById(this.id));
      // 设置 ECharts 实例的配置
      this.myChart.setOption(this.option);
    },
    handleResize() {
      let a = null
      if (a) {
        clearTimeout(a)
      } else {
        a = setTimeout(() => {
          this.myChart.resize()
        }, 500)
      }
    }
  },
  watch: {
    id:{
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      }
    }
  },
}
</script>
<style ></style>